<template>
	<view class="register">
		<view class="registerMain">
			<view class="registerMainHead" v-if="id">
				<view class="registerMainHeadL">
					驳回原因：
				</view>
				<view class="registerMainHeadR">
					{{rejectionReason}}
				</view>
			</view>
			<view class="registerLi">
				<text class="registerLix">*</text>
				<text class="registerLiName">厂家名称</text>
				<input class="registerLiInput" type="text" v-model="put.factoryName" placeholder-class="inputplace" placeholder="请输入厂家名称" value="" />
			</view>
			<view class="registerLi">
				<text class="registerLix">*</text>
				<text class="registerLiName">联系人</text>
				<input class="registerLiInput" type="text" v-model="put.factoryPerson" placeholder-class="inputplace" placeholder="请输入联系人姓名"
					value="" />
			</view>
			<view class="registerLi">
				<text class="registerLix">*</text>
				<text class="registerLiName">联系方式</text>
				<input class="registerLiInput" type="number" v-model="put.factoryPhone" placeholder-class="inputplace" placeholder="请输入手机号" value="" />
				<view class="registerLiYzm" v-if="show_time" @click="sendS">
					获取验证码
				</view>
				<view class="registerLiYzm" v-else>
					{{time}}s
				</view>
			</view>
			<view class="registerLi">
				<text class="registerLix">*</text>
				<text class="registerLiName">验证码</text>
				<input class="registerLiInput" type="number" v-model="put.yzCode" placeholder-class="inputplace" placeholder="请输入验证码" value="" />
			</view>
			<view class="registerLi">
				<text class="registerLix">*</text>
				<text class="registerLiName">登录密码</text>
				<input class="registerLiInput" type="number" v-model="put.factoryPassword" placeholder-class="inputplace" placeholder="请输入登录密码" value="" />
			</view>
			<view class="registerLi">
				<text class="registerLix">*</text>
				<text class="registerLiName">邮箱</text>
				<input class="registerLiInput" type="text" v-model="put.factoryEmail" placeholder-class="inputplace" placeholder="请输入邮箱地址" value="" />
			</view>
			<view class="registerLi" @click="cli_goaddress">
				<text class="registerLix">*</text>
				<text class="registerLiName">所属区域</text>
				<input class="registerLiInput" disabled v-model="area" type="text" disabledplaceholder-class="inputplace" placeholder="请选择所在地区" value="" />
			</view>
			<view class="registerLi">
				<text class="registerLix">*</text>
				<text class="registerLiName">详细地址</text>
				<input class="registerLiInput" type="text" v-model="put.factoryAddress" placeholder-class="inputplace" placeholder="请输入详细地址"
					value="" />
			</view>
			<view class="registerTitle">
				<text class="registerLix">*</text>
				<text class="registerTName">请上传营业执照</text>
			</view>
			<view class="registerUp">
				<view class="registerUpBoxPhone" v-if="put.factoryLicence">
					<image class="registerUpBoxPhoneImg" :src=put.factoryLicence mode=""></image>
					<image @click="cli_closeImg" class="registerUpBoxPhoneImgClose"
						src=".https://www.zzzsyh.com/applets/agent/agent/close_two.png" mode=""></image>
				</view>
				<view class="registerUpBox" @click="cli_upimg" v-else>
					<image class="registerUpBoxImg" src="../../../static/manufacturers/camera2.png" mode=""></image>
					<text class="registerUpBoxTxt">上传图片</text>
				</view>

			</view>
		</view>
			<view class="registerBtn" @click="cli_btn">
				提交
			</view>
		
		<uni-popup ref="popup" type="bottom" :mask-click="false">
			<view class="add-pop-btm">
				<view class="apb-head">
					<text></text>
					<text class="apb-head-txt">所在地区</text>
					<image class="apb-head-img" src="https://www.zzzsyh.com/applets/agent/agent/close.png" mode="" @click="cli_closePop">
					</image>
				</view>
				<view class="apd-chan">
					<view class="apd-chan-box" v-if="listNum == 2 || listNum == 3 || listNum == 4"
						@click="cli_address_pro">
						<text class="apd-chan-txt">{{pro}}</text>
						<!-- <view class="apd-chan-btm" :class="{apdChanBtmColor : colorNum == 1}"></view> -->
					</view>
					<view class="apd-chan-box" v-if="listNum == 3 || listNum == 4" @click="cli_address_city">
						<text class="apd-chan-txt">{{city}}</text>
						<!-- <view class="apd-chan-btm" :class="{apdChanBtmColor : colorNum == 2}"></view> -->
					</view>
					<view class="apd-chan-box" v-if="listNum == 4" @click="cli_address_country">
						<text class="apd-chan-txt">{{country}}</text>
						<!-- <view class="apd-chan-btm" :class="{apdChanBtmColor : colorNum == 3}"></view> -->
					</view>
					<view class="apd-chan-box" v-if="show_title">
						<text class="apd-chan-txt">请选择</text>
						<view class="apd-chan-btm apdChanBtmColor"></view>
					</view>
				</view>
				<view class="apd-li-box">
					<scroll-view scroll-y="true" class="scroll-Y">
						<view class="apd-li" v-if="listNum == 1" v-for="(item, index) of list_pro" :key="index"
							@click="cli_pop_li1(item, index)">
							<text :class="{apdLiTxt : popImgNum1 == index}">{{item.areaName}}</text>
						</view>
						<view class="apd-li" v-if="listNum == 2" v-for="(item, index) of list_city" :key="index"
							@click="cli_pop_li2(item, index)">
							<text :class="{apdLiTxt : popImgNum2 == index}">{{item.areaName}}</text>
						</view>
						<view class="apd-li" v-if="listNum == 3" v-for="(item, index) of list_country" :key="index"
							@click="cli_pop_li3(item, index)">
							<text :class="{apdLiTxt : popImgNum3 == index}">{{item.areaName}}</text>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	export default {
		data() {
			return {
				id: '',
				time: 60,
				show_time: true,
				put: {
					factoryName: '',
					factoryPerson: '',
					factoryPhone: '',
					yzCode: '',
					factoryPassword: '',
					factoryEmail: '',
					factoryAddress: '',
					factoryLicence: ''
				},
				rejectionReason: '', // 驳回原因
				popImgNum1: -1,
				popImgNum2: -1,
				popImgNum3: -1,
				listNum: 1,
				list_pro: [],
				list_city: [],
				list_country: [],
				area: '',
				pro: '',
				pro_id: '',
				city: '',
				city_id: '',
				country: '',
				country_id: '',
				name: '',
				phone: '',
				address: '',
			}
		},
		onLoad(val) {
			if (val.id) {
				this.id = val.id
				this.getFactoryId(val.id)
			}
		},
		mounted() {
			this.get_getAreaByPid('', 1)
		},
		methods: {
			cli_goaddress() {
				this.show_title = true
				this.listNum = 1
				this.popImgNum1 = -1
				this.popImgNum2 = -1
				this.popImgNum3 = -1
				this.$refs.popup.open()
			},
			// 点击关闭弹窗
			cli_closePop() {
				this.$refs.popup.close()
			},
			// 点击所在省市县
			cli_address_pro() {
				this.listNum = 1
			},
			cli_address_city() {
				this.listNum = 2
			},
			cli_address_country() {
				this.cli_address_country = false
				this.listNum = 3
			},
			// 点击地址列表
			cli_pop_li1(item, index) {
				this.popImgNum1 = index
				this.get_getAreaByPid(item.id, 2)
				this.listNum = 2
				this.pro = item.areaName
				this.pro_id = item.id
			},
			cli_pop_li2(item, index) {
				this.popImgNum2 = index
				this.get_getAreaByPid(item.id, 3)
				this.listNum = 3
				this.city = item.areaName
				this.city_id = item.id
			},
			cli_pop_li3(item, index) {
				this.popImgNum3 = index
				this.listNum = 4
				this.show_title = false
				this.country = item.areaName
				this.country_id = item.id
				this.$refs.popup.close()
				this.area = this.pro + this.city + this.country
			},
			// 获取地址信息
			get_getAreaByPid(pid, num) {
				let _that = this
				uni.request({
					url: allapi.getAreaByPid,
					data: {
						pid: pid
					},
					success: (res) => {
						let dat = res.data.data
						// console.log(dat);
						if (num == 1) {
							_that.list_pro = dat
						} else if (num == 2) {
							_that.list_city = dat
						} else if (num == 3) {
							_that.list_country = dat
						}
					}
				})
			},
			// 发送验证码
			sendS() {
				let phone = this.put.factoryPhone
				let _that = this
				let time = this.time
				var myreg = /^[1][1,2,3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test(phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
				} else {
					_that.sendSMS(phone)
					_that.show_time = false
					let gettime = setInterval(function() {
						time--
						_that.time = time
						if (time == 0) {
							clearInterval(gettime)
							_that.time = 60
							_that.show_time = true
						}
					}, 1000)
				}
			},
			sendSMS() {
				uni.request({
					url: allapi.sendSMS,
					data: {
						phone: this.put.factoryPhone,
					},
					success: (res) => {
						console.log(res);
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
				})
			},
			// 点击厂家注册
			cli_btn() {
				let _that = this
				let factoryName = this.put.factoryName
				let factoryPerson = this.put.factoryPerson
				let factoryPhone = this.put.factoryPhone
				let yzCode = this.put.yzCode
				let factoryEmail = this.put.factoryEmail
				let factoryAddress = this.put.factoryAddress
				let factoryLicence = this.put.factoryLicence
				let country_id = this.country_id
				let myreg = /^[1][1,2,3,4,5,6,7,8,9][0-9]{9}$/;
				let em = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				if (!factoryName) {
					uni.showToast({
						title: '请输入厂家名称',
						icon: 'none'
					})
				} else if (!factoryPerson) {
					uni.showToast({
						title: '请输入联系人姓名',
						icon: 'none'
					})
				} else if (!myreg.test(factoryPhone)) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				} else if (!yzCode) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
				} else if (!em.test(factoryEmail)) {
					uni.showToast({
						title: '请输入正确的邮箱地址',
						icon: 'none'
					})
				} else if (!country_id) {
					uni.showToast({
						title: '请选择所在地区',
						icon: 'none'
					})
				} else if (!factoryAddress) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					})
				} else if (!factoryLicence) {
					uni.showToast({
						title: '请上传营业执照',
						icon: 'none'
					})
				} else {
					if (_that.id) {
						_that.registerFactoryAgain()
					}else {
						_that.registerFactory()
					}
				}
			},
			// 厂家注册
			registerFactory() {
				let factoryName = this.put.factoryName
				let factoryPerson = this.put.factoryPerson
				let factoryPhone = this.put.factoryPhone
				let yzCode = this.put.yzCode
				let factoryPassword = this.put.factoryPassword
				let factoryEmail = this.put.factoryEmail
				let factoryAddress = this.put.factoryAddress
				let factoryLicence = this.put.factoryLicence
				uni.request({
					url: allapi.registerFactory,
					data: {
						factoryName: factoryName,
						factoryPerson: factoryPerson,
						factoryPhone: factoryPhone,
						yzCode: yzCode,
						factoryPassword: factoryPassword,
						factoryEmail: factoryEmail,
						factoryAddress: factoryAddress,
						factoryLicence: factoryLicence,
						pCode: this.pro_id,
						pName: this.pro,
						cCode: this.city_id,
						cName: this.city,
						aCode: this.country_id,
						aName: this.country,
					},
					success: (res) => {
						console.log(res);
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						
						if (res && res.data.code == 0) {
							setTimeout(function() {
								uni.navigateBack()
							}, 1000)
						}
					}
				})
			},
			registerFactoryAgain () {
				let factoryId = this.id
				let factoryName = this.put.factoryName
				let factoryPerson = this.put.factoryPerson
				let factoryPhone = this.put.factoryPhone
				let yzCode = this.put.yzCode
				let factoryPassword = this.put.factoryPassword
				let factoryEmail = this.put.factoryEmail
				let factoryAddress = this.put.factoryAddress
				let factoryLicence = this.put.factoryLicence
				uni.request({
					url: allapi.registerFactoryAgain,
					data: {
						factoryId: factoryId,
						factoryName: factoryName,
						factoryPerson: factoryPerson,
						factoryPhone: factoryPhone,
						yzCode: yzCode,
						factoryPassword: factoryPassword,
						factoryEmail: factoryEmail,
						factoryAddress: factoryAddress,
						factoryLicence: factoryLicence,
						pCode: this.pro_id,
						pName: this.pro,
						cCode: this.city_id,
						cName: this.city,
						aCode: this.country_id,
						aName: this.country,
					},
					success: (res) => {
						console.log(res);
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if (res && res.data.code == 0) {
							setTimeout(function() {
								uni.navigateBack()
							}, 1000)
						}
						
					}
				})
			},
			// 上传照片
			cli_upimg() {
				let _that = this
				uni.chooseImage({
					count:1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: allapi.upload, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								let dat = uploadFileRes.data
								let msg = JSON.parse(dat)
								let imgurl = msg.url
								console.log(msg);
								_that.put.factoryLicence = imgurl
							}
						});
					}
				});
			},
			// 删除图片
			cli_closeImg() {
				this.put.factoryLicence = ''
			},
			// 获取厂家信息
			getFactoryId (factoryId) {
				let _that = this
				uni.request({
					url: allapi.getFactoryId,
					data: {
						factoryId: factoryId
					},
					success: (res) => {
						console.log(res);
						let dat = res.data.data
						_that.put.factoryName = dat.factoryName
						_that.put.factoryPerson = dat.factoryPerson
						_that.put.factoryPhone = dat.factoryPhone
						_that.put.factoryEmail = dat.factoryEmail
						_that.put.factoryAddress = dat.factoryAddress
						_that.put.factoryLicence = dat.factoryLicence
						_that.pro = dat.factoryProvinceName
						_that.pro_id = dat.factoryProvice
						_that.city = dat.factoryCityName
						_that.city_id = dat.factoryCity
						_that.country = dat.factoryDistrictName
						_that.country_id = dat.factoryDistrict
						_that.area = dat.factoryProvinceName + dat.factoryCityName + dat.factoryDistrictName
						_that.rejectionReason = dat.rejectionReason
					}
				})
			}
		}
	}
</script>

<style scoped>
	.register {
		position: absolute;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, #D0F5F0 0%, #E8F8F6 11%, #F7FDFD 100%);
		display: flex;
		flex-direction: column;
	}

	.registerMain {
		flex: 1;
		overflow: auto;
	}

	.registerMainHead {
		display: flex;
		font-size: 28rpx;
		color: #333333;
		margin: 24rpx;
	}

	.registerMainHeadR {
		flex: 1;
		font-size: 28rpx;
		color: #EF691C;
	}

	.registerLi {
		background: url('https://www.zzzsyh.com/applets/agent/factory/24.png');
		background-repeat: no-repeat;
		background-size: 100%;
		margin: 36rpx 24rpx;
		height: 92rpx;
		display: flex;
		align-items: center;
	}

	.registerLix {
		color: red;
		width: 32rpx;
		height: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 8rpx;
	}

	.registerLiName {
		font-size: 28rpx;
		color: #666666;
		margin-left: 8rpx;
		width: 115rpx;
	}

	.registerLiInput {
		flex: 1;
		margin-left: 24rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.registerLiYzm {
		width: 204rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 24rpx;
		color: #5DD4D6;
		background: url('https://www.zzzsyh.com/applets/agent/factory/5.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.registerTitle {
		display: flex;
		align-items: center;
		margin-left: 24rpx;
		margin-top: 40rpx;
	}

	.registerTName {
		font-size: 28rpx;
		color: #666666;
		margin-left: 8rpx;
	}

	.registerUp {
		margin: 40rpx 24rpx;
	}

	.registerUpBox {
		width: 144rpx;
		height: 148rpx;
		background: url('https://www.zzzsyh.com/applets/agent/factory/25.png');
		background-size: 100%;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.registerUpBoxPhone {
		width: 144rpx;
		height: 148rpx;
		border-radius: 12rpx;
		background: #EEEEEE;
		position: relative;
	}

	.registerUpBoxPhoneImg {
		width: 144rpx;
		height: 148rpx;
		border-radius: 12rpx;
	}

	.registerUpBoxImg {
		width: 48rpx;
		height: 48rpx;
	}

	.registerUpBoxPhoneImgClose {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		right: -10rpx;
		top: -10rpx;
	}

	.registerUpBoxTxt {
		font-size: 20rpx;
		color: #666666;
	}

	.registerBtn {
		background: linear-gradient(to left, #3CC5EF, #74DFC5);
		margin: 50rpx 54rpx;
		border-radius: 72rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 36rpx;
		color: #FFFFFF;
	}

	.add-pop-btm {
		width: 100%;
		height: 960rpx;
		background: #fff;
		border-top-right-radius: 24rpx;
		border-top-left-radius: 24rpx;
	}

	.apb-head {
		height: 92rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;
		margin: 0 24rpx;
	}

	.apb-head-txt {
		color: #333333;
		font-size: 30rpx;
	}

	.apb-head-img {
		width: 48rpx;
		height: 48rpx;
	}

	.apd-chan {
		height: 96rpx;
		align-items: center;
		display: flex;
		font-size: 28rpx;
		color: #333333;
		padding: 0 24rpx;
		border-top: 2rpx solid #DDDDDD;
		border-bottom: 2rpx solid #DDDDDD;
	}

	.apd-chan-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-right: 48rpx;
	}

	.apd-chan-txt {
		height: 56rpx;
		line-height: 56rpx;
		margin-bottom: 6rpx;
	}

	.apd-chan-btm {
		width: 56rpx;
		height: 4rpx;
		background: #FFFFFF;
		border-radius: 2rpx;
	}

	.apdChanBtmColor {
		background: #F76B1F !important;
	}

	.apd-li-box {
		padding: 20rpx 24rpx;
		overflow: auto;
		height: 620rpx;
	}

	.apd-li {
		height: 80rpx;
		color: #333333;
		line-height: 80rpx;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.apdLiTxt {
		color: #F76B1F !important;
	}

	.apd-li-img {
		width: 40rpx;
		height: 30rpx;
	}
	.scroll-Y {
		height: 100%;
		overflow: auto;
	}
</style>
